<template>
  <div class="execution">
    <basic-container>
      <div class="views-message operate-container">
        <div class="productCate-hint">
          <i class="el-icon-info"></i>
          <span class="message">提示信息</span>
        </div>
        <ul class="productCate-text">
          <li>
            配置商品只能偶数不能是奇数。如果想重新配置商品，重新添加商品即可。
          </li>
        </ul>
      </div>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="handleProduct()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div class="operate-container">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column label="商品缩略图" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.pic" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column
            label="价格"
            prop="price"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  @click="handleDelelt(scope.$index, scope.row)"
                  type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
        </el-table>
      </div>

      <el-dialog title="添加商品" :visible.sync="dialogVisible" width="50%">
        <!-- <el-form
          :model="listQuery"
          :rules="rules"
          ref="listQuery"
          label-width="150px"
        >
          <el-form-item label="搜索商品：" prop="title">
            <el-input
              v-model="listQuery.title"
              style="width: 40%"
              size="small"
            ></el-input>
            <el-button type="primary" @click="hanldSeach()" size="small"
              >搜索</el-button
            >
          </el-form-item>
        </el-form> -->
        <div class="table-container">
          <el-table
            :data="passList"
            style="width: 100%"
            border
            :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column label="商品缩略图" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.pic" style="width: 50px; height: 50px" />
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="title"
              align="center"
            ></el-table-column>
            <el-table-column
              label="价格"
              prop="price"
              align="center"
            ></el-table-column>
            <el-table-column label="上传热卖尺寸图" prop="price" align="center">
              <template slot-scope="scope">
                <single-upload
                  v-model="scope.row.productIdMapPic"
                ></single-upload>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div
          class="operate-container"
          style="display: flex; justify-content: space-between"
        >
          <el-button
            class="search-button"
            @click="handleBatchOperate()"
            type="primary"
            size="small"
          >
            确定
          </el-button>

          <el-pagination
            background
            @size-change="handleListSizeChange"
            @current-change="handleListCurrentChange"
            layout="total,sizes,prev,pager,next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5, 10, 15, 20]"
            :current-page.sync="listQuery.current"
            :total="passTotal"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import {
  getSaleProduct,
  platformSeleProduct,
  hotSaleUpdate,
  eraseSingleProduct
} from "@/api/home/banner";

import SingleUpload from "@/components/Upload/singleUpload.vue";

export default {
  components: {
    SingleUpload,
  },
  data() {
    return {
      list: [],
      type: null,
      passListQuery: {},
      dialogVisible: false,
      passList: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      passTotal: 0,
      multipleSelection: [],
    };
  },
  created() {
    this.type = this.$route.query.type;
    this.getList();
  },
  methods: {
    getList() {
      let params;
      if (this.type === "platform") {
        params = {
          platformId: this.$route.query.platformId,
        };
      } else if (this.type === "store") {
        params = {
          storeId: this.$route.query.storeId,
        };
      }
      getSaleProduct(params).then((res) => {
        this.list = res.data.data;
      });
    },

    handleProduct() {
      this.dialogVisible = true;
      this.getAddSeleProdute();
    },
    getAddSeleProdute() {
      if (this.type === "platform") {
        this.listQuery.platformId = this.$route.query.platformId;
      } else if (this.type === "store") {
        this.listQuery.storeId = this.$route.query.storeId;
      }
      platformSeleProduct(this.listQuery).then((res) => {
        this.passList = res.data.data.records;
        this.passTotal = res.data.data.total;
      });
    },

    handleListSizeChange(val) {
      this.passListQuery.size = val;
      this.getAddSeleProdute();
    },
    handleListCurrentChange(val) {
      this.passListQuery.current = val;
      this.getAddSeleProdute();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleBatchOperate() {
      // if (
      //   this.multipleSelection.length < 2 ||
      //   this.multipleSelection.length % 2 ||
      //   this.multipleSelection.length > 7
      // ) {
      //   this.$message({
      //     message: "请选择商品或选择商品数量为奇数且不能超过6个商品~",
      //     type: "warning",
      //     duration: 1000,
      //   });
      //   return;
      // }

      this.multipleSelection.forEach((item) => {
        if (!item.productIdMapPic) {
          this.$message({
            message: "请你检查仔细是否有商品没有上传图片！",
            type: "warning",
            duration: 1000,
          });
          return false;
        }
      });

      let productIds = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        productIds.push({
          id: this.multipleSelection[i].id,
          productIdMapPic: this.multipleSelection[i].productIdMapPic,
        });
      }
      this.hanldeAdd(productIds);
    },
    hanldeAdd(ids) {
      let params;
      if (this.type === "platform") {
        params = {
          platformId: this.$route.query.platformId,
          productIds: ids,
        };
      } else if (this.type === "store") {
        params = {
          storeId: this.$route.query.storeId,
          productIds: ids,
        };
      }
      hotSaleUpdate(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.dialogVisible=false;
          this.getList();
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },

    handleDelelt(index, row) {
      let that = this;
      let params;
      if (that.type === "platform") {
        params = {
          platformId: that.$route.query.platformId,
          productId: row.id,
        };
      } else if (that.type === "store") {
        params = {
          storeId: that.$route.query.storeId,
          productId: row.id,
        };
      }
      that
        .$confirm("是否确认删除" + row.title + "商品", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
         
          eraseSingleProduct(params).then((res) => {
            if (res.data.code === 200) {
              that.getList();
              that.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning",
                duration: 1000,
              });
            }
          });
        });
    },
  },
};
</script>
